<template>
	<div class="layerTree">
		<div class="searchAim">
			<Input placeholder="请输入...">
				<Icon type="ios-search" slot="suffix" />
			</Input>
		</div>
		<div class="tree">
			<div class="name-container">
				<CheckboxGroup v-model="selectPeoples" @on-change="clickPeople(selectPeoples)">
					<Checkbox :label="item.attributes" v-for="(item,index) in peoples" :key="index" style="margin: 5px 2px">
						<span>{{item.attributes.name}}</span>
						<Button type="default" size="small" @click="isShowTrail(item.attributes.phone)" shape="circle">新增轨迹</Button>
					</Checkbox>
				</CheckboxGroup>
			</div>
			<div class="name-operate">
				<Button @click="$emit('showPeople')" type="primary">新建</Button>
				<Button @click="deletePeople(selectPeoples)" type="primary" style="float: right">删除</Button>
			</div>
		</div>
	</div>
</template>
<script>
import { mapState, mapActions } from "vuex";

import Query from "@arcgis/core/rest/support/Query";
let highlightSelect = null;
export default {
	name: "layerTree",
	data() {
		return {
			serviceMsg: [],
			initService: [],
			fuheData: [],
			serviceTotalNum: 0,
			userServiceId: [],
			userServices: [],
			selectPeoples: [],
		};
	},
	computed: {
		...mapState({
			view: (state) => state.oneMap.view,
			map: (state) => state.oneMap.map,

			layers: (state) => {
				return state.oneMap.layers;
			},
			peoples: (state) => {
				return state.peopleInfo;
			},
		}),
	},
	methods: {
		...mapActions(["ReloadPeopleInfo"]),
		isShowTrail(id) {
			this.$emit("getPhoneId", id);
		},
		clickPeople(peoples) {
			// 查询grapics并加载到地图上,以不同的颜色显示
			let self = this;
			this.view
				.whenLayerView(this.$commonLayers.trailLayer)
				.then(function (layerView) {
					if (highlightSelect) {
						highlightSelect.remove();
					}
					self.$commonLayers.trailLayer.queryFeatures().then((res) => {
						console.log(res.features);
					});
					let ids = peoples.map((people) => `'${people.phone}'`);
					const query = new Query();
					query.outFields = ["*"];
					query.where = `phone in (${ids.join(",")})`;
				
					self.$commonLayers.trailLayer
						.queryFeatures(query)
						.then(function (results) {
							if (results.features.length) {
								highlightSelect = layerView.highlight(results.features);
							}
						});
				});
		},
		deletePeople(peoples) {
			// or specify globalIds of features to be deleted
			let self = this;
			this.$commonLayers.peopleLayer
				.applyEdits({
					deleteFeatures: peoples.map((people) => {
						return {
							objectId: people.objectid_1,
						};
					}),
				})
				.then((res) => {
					self.ReloadPeopleInfo();
				});
		},
	},
	created() {
		this.ReloadPeopleInfo();
	},
};
</script>
<style>
.ivu-tree-title-selected,
.ivu-tree-title-selected:hover {
	background-color: white !important;
}
.ivu-tree-title {
	width: 100%;
}

.ivu-btn-small {
	float: right;
}
</style>
<style lang='scss' scoped>
.ivu-btn-ghost {
	color: rgb(24, 24, 24);
}
.layerTree {
	width: 100%;
	height: 100%;
	overflow: auto;
	overflow-x: hidden;
	.title {
		height: 33px;
		padding-left: 20px;
		.titleContent {
			font-size: 16px;
			line-height: 33px;
			font-family: AlibabaPuHuiTiM;
			color: rgba(48, 128, 254, 1);
		}
	}
	.fengeLine {
		margin: 0;
	}

	.searchAim {
		margin: 9px 10px 22px;
	}
	.tree {
		padding: 0 10px 13px;
		display: flex;
		flex-direction: column;
		// /deep/ .ivu-tree-title {
		// 	display: inline-block;
		// 	font-size: 14px;
		// 	font-family: PingFangSC-Medium, PingFang SC;
		// 	font-weight: 500;
		// 	color: rgb(255, 255, 255);
		// }
		// /deep/ .ivu-tree-arrow {
		// 	display: none !important;
		// }
		.name-container {
			.ivu-checkbox-group {
				flex: 1;
				height: 2px !important;
				overflow: auto;
				display: flex;
				flex-direction: column;
			}
			flex: 1;
			height: 2px !important;
			overflow: auto;
			display: flex;
			flex-direction: column;
		}
		.name-operate {
			height: 80px;
			margin: 20px 60px;
		}
	}
}

/*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/
::-webkit-scrollbar {
	width: 3px;
	height: 3px;
	background-color: #f5f5f5;
}
/*定义滚动条轨道 内阴影+圆角*/
::-webkit-scrollbar-track {
	box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
	border-radius: 10px;
	background-color: #f5f5f5;
}
/*定义滑块 内阴影+圆角*/
::-webkit-scrollbar-thumb {
	border-radius: 10px;
	box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
	background-color: rgb(204, 204, 204);
}
</style>
